<script setup lang="ts">
import { getCurrentInstance, reactive, ref, toRaw } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";

import FormCheckbox from "@/components/form/checkbox.vue";
import FormButton from "@/components/form/button.vue";
import InfoEditForm from "./components/info-edit-form.vue";

onLoad(() => {
  eventChannel = (
    getCurrentInstance()?.proxy as any
  ).getOpenerEventChannel() as UniApp.EventChannel;
  eventChannel.once("ev-name-data", (resp) => {
    console.log("ev-name-data", resp);

    formData.show_name_type = resp.show_name_type;
    formData.fullname = resp.fullname;
    formData.nickname = resp.nickname;
  });
});
onUnload(() => eventChannel?.emit("ev-name-edit", ""));

const formData = reactive({
  show_name_type: 1,
  fullname: "",
  nickname: "",
});

const editClick = () => {
  infoEditForm.value?.show(
    {
      value: formData.nickname,
      title: "修改昵称",
      placeholder: "昵称不超过10个字",
    },
    (value) => (formData.nickname = value)
  );
};

const saveClick = () => {
  eventChannel?.emit("ev-name-edit", toRaw(formData));
};

let eventChannel: UniApp.EventChannel | undefined = undefined;
const infoEditForm = ref<InstanceType<typeof InfoEditForm>>();
</script>

<template>
  <view class="name-title">选择对外展示名字</view>

  <view class="name-form">
    <view
      class="name-form-item"
      :class="{ 'name-form-active': formData.show_name_type === 1 }"
      @click="formData.show_name_type = 1"
    >
      <view class="name-form-checkbox">
        <FormCheckbox :modelValue="formData.show_name_type === 1" />
      </view>
      <view class="name-form-value">{{ formData.fullname }}</view>
      <view class="name-form-desc">真实姓名</view>
    </view>
    <view
      class="name-form-item"
      :class="{ 'name-form-active': formData.show_name_type === 2 }"
      @click="formData.show_name_type = 2"
    >
      <view class="name-form-checkbox">
        <FormCheckbox :modelValue="formData.show_name_type === 2" />
      </view>
      <view class="name-form-value">{{ formData.nickname }}</view>
      <view class="name-form-desc">昵称</view>
      <view class="name-form-edit" @click.stop="editClick">修改</view>
    </view>
  </view>

  <view class="name-btn">
    <view @click="saveClick">
      <FormButton>保存</FormButton>
    </view>
  </view>

  <InfoEditForm ref="infoEditForm" />
</template>

<style lang="scss">
page {
  padding-top: 40rpx;
}

.name-title {
  padding-left: 30rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
}

.name-form {
  .name-form-item {
    display: flex;
    align-items: center;
    height: 116rpx;
    padding: 0 40rpx;
    margin: 0 30rpx 30rpx;
    border: 2rpx solid #ffffff;
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .name-form-active {
    border-color: #ff7900;
    background-color: rgba(255, 121, 0, 0.08);
  }

  .name-form-checkbox {
    flex-shrink: 0;
  }

  .name-form-value {
    min-width: 0;
    margin-left: 20rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 40rpx;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .name-form-desc {
    flex-shrink: 0;
    margin-left: 20rpx;
    margin-right: 20rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .name-form-edit {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 24rpx;
    color: #ff7900;
    font-weight: bold;
  }
}

.name-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>